{% extends 'base.html' %}

{% block main %}
{% block banner_script %}
<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    dark: '#0F172A',
                    'dark-blue': '#1E293B',
                    primary: '#1E40AF',
                    secondary: '#F97316',
                    'gray-light': '#E2E8F0',
                    'gray-medium': '#64748B',
                },
                fontFamily: {
                    inter: ['Inter', 'sans-serif'],
                },
                boxShadow: {
                    'glow': '0 0 15px rgba(30, 64, 175, 0.5)',
                }
            },
        }
    }
</script>
{% endblock banner_script %}

<!-- 主内容区 -->
<main class="flex-grow pt-20 pb-16">
    <!-- 播放区域 -->
    <section class="relative bg-dark-blue">
        <!-- 背景图 -->
        <div class="absolute inset-0 z-0">
            <img src="{{ data_info.vod_pic }}" alt="{{ data_info.vod_name }}" class="w-full h-full object-cover opacity-20">
            <div class="absolute inset-0 bg-gradient-to-b from-dark-blue/60 via-dark-blue/80 to-dark-blue"></div>
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <!-- 内容区 - 三列布局 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 左侧信息 - 占两列 -->
                <div class="lg:col-span-2">
                    <!-- 详情信息卡片 -->
                    <div class="bg-dark-blue/50 rounded-lg p-5 shadow-lg mb-8">
                        <!-- 影片标题和标签 -->
                        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-2">{{ data_info.vod_name }}</h1>
                        <div class="flex flex-wrap items-center gap-2 mb-4">
                            <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-sm font-medium">{{ data_info.vod_class }}</span>
                        </div>

                        <!-- 详细信息网格 -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
                            <div class="flex items-center">
                                <span class="text-gray-medium w-24">导演:</span>
                                <span class="text-white">{{ data_info.vod_director }}</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-medium w-24">主演:</span>
                                <span class="text-white">{{ data_info.vod_actor }}</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-medium w-24">上映时间:</span>
                                <span class="text-white">{{ data_info.vod_pubdate }}</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-medium w-24">备注:</span>
                                <span class="text-white">{{ data_info.vod_remarks }}</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-gray-medium w-24">评分:</span>
                                <span class="text-white">{{ data_info.vod_douban_score }}</span>
                            </div>
                        </div>

                        <!-- 剧情介绍 -->
                        <div class="mb-6">
                            <h3 class="text-xl font-bold mb-3 flex items-center">
                                <i class="fa fa-file-text-o text-primary mr-2"></i>
                                简介
                            </h3>
                            {{ data_info.vod_content }}
                        </div>

                        <!-- 纯HTML实现的剧集选择器 -->
                        <div class="mb-6">
                            <label for="episode-select" class="block text-white font-medium mb-2">选择剧集：</label>
                            <select id="episode-select" class="w-64 bg-dark-blue border border-gray-medium/30 text-white rounded-lg px-4 py-3 focus:outline-none focus:border-primary">
                                {% for key, play_url in episodes %}
                                <option value="{{ play_url }}" >{{ key }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- 播放和下载按钮 -->
                        <div class="flex flex-wrap gap-4">
                            <button id="play-btn" class="flex items-center space-x-2 bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg font-medium shadow-lg hover:shadow-glow transition-all duration-300 transform hover:scale-105">
                                <i class="fa fa-play-circle"></i>
                                <span>立即播放</span>
                            </button>
                            <button id="download-btn" class="flex items-center space-x-2 bg-gray-dark hover:bg-gray-dark/90 text-white px-8 py-3 rounded-lg font-medium shadow-lg hover:shadow-glow transition-all duration-300 transform hover:scale-105">
                                <i class="fa fa-download"></i>
                                <span>下载剧集</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 右侧封面图 - 占一列 -->
                <div class="lg:col-span-1">
                    <!-- 封面图卡片 -->
                    <div class="bg-dark-blue/50 rounded-lg p-5 shadow-lg h-full">
                        <div class="relative rounded-lg overflow-hidden shadow-xl">
                            <img
                                src="{{ data_info.vod_pic }}"
                                alt="{{ data_info.vod_name }}"
                                class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-500"
                            >
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
                                <span class="bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">{{ data_info.vod_class }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 自定义可复制提示框（添加到页面底部） -->
<div id="download-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden transition-opacity duration-300">
    <div class="bg-white rounded-2xl p-6 max-w-md w-full shadow-2xl transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
        <div class="flex justify-between items-start mb-4">
            <h3 class="text-xl font-bold text-gray-800">视频下载链接</h3>
            <button id="close-modal" class="text-gray-400 hover:text-gray-600 transition-colors">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div class="mb-5">
            <p class="text-gray-600 mb-2">请复制以下链接到下载工具：</p>
            <div class="relative">
                <input
                    id="link-input"
                    type="text"
                    value=""
                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-gray-800 bg-gray-50 transition-all"  <!-- 关键修改：文本和背景色 -->
                    readonly
                >
                <button
                    id="copy-btn"
                    class="absolute right-2 top-2 bg-primary text-white px-3 py-1 rounded-lg text-sm hover:bg-primary/90 transition-colors"
                >
                    复制链接
                </button>
            </div>
        </div>
        <div class="flex flex-col sm:flex-row justify-end gap-3">
            <button id="visit-tool" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">
                打开下载工具
            </button>
            <button id="confirm-btn" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                确定
            </button>
        </div>
    </div>
</div>

{% endblock main %}


{% block end_script %}
<script>
    // 获取DOM元素
    const episodeSelect = document.getElementById('episode-select');
    const playBtn = document.getElementById('play-btn');
    const downloadBtn = document.getElementById('download-btn');
    const downloadModal = document.getElementById('download-modal');
    const modalContent = document.getElementById('modal-content');
    const closeModal = document.getElementById('close-modal');
    const confirmBtn = document.getElementById('confirm-btn');
    const linkInput = document.getElementById('link-input');
    const copyBtn = document.getElementById('copy-btn');
    const visitTool = document.getElementById('visit-tool');

    // 初始化按钮状态
    updateButtonLinks();

    // 监听选择变化
    episodeSelect.addEventListener('change', updateButtonLinks);

    // 更新按钮链接的函数
    function updateButtonLinks() {
        const selectedOption = episodeSelect.options[episodeSelect.selectedIndex];
        const playUrl = selectedOption.value;

        // 设置播放按钮的链接
        playBtn.onclick = function() {
            window.location.href = `https://zyjiexi.com/player/?url=${encodeURIComponent(playUrl)}`;
        };

        // 设置下载按钮的点击事件：显示模态框
        downloadBtn.onclick = function() {
            if (playUrl) {
                linkInput.value = playUrl;
                showDownloadModal();
            }
        };

        // 按钮状态控制
        if (playUrl) {
            playBtn.disabled = false;
            downloadBtn.disabled = false;
        } else {
            playBtn.disabled = true;
            downloadBtn.disabled = true;
        }
    }

    // 显示下载模态框
    function showDownloadModal() {
        downloadModal.classList.remove('hidden');
        // 添加动画效果
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    // 隐藏模态框
    function hideDownloadModal() {
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        // 动画结束后隐藏
        setTimeout(() => {
            downloadModal.classList.add('hidden');
        }, 300);
    }

    // 复制链接到剪贴板
    function copyLink() {
        linkInput.select();
        document.execCommand('copy');

        // 显示复制成功提示
        copyBtn.textContent = '已复制！';
        copyBtn.classList.add('bg-green-500');

        // 3秒后恢复按钮状态
        setTimeout(() => {
            copyBtn.textContent = '复制链接';
            copyBtn.classList.remove('bg-green-500');
        }, 3000);
    }

    // 访问下载工具网站
    function visitDownloadTool() {
        window.open('https://tools.thatwind.com/tool/m3u8downloader/', '_blank');
    }

    // 事件监听
    closeModal.addEventListener('click', hideDownloadModal);
    confirmBtn.addEventListener('click', hideDownloadModal);
    copyBtn.addEventListener('click', copyLink);
    visitTool.addEventListener('click', visitDownloadTool);

    // 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileMenuClose = document.getElementById('mobile-menu-close');

    mobileMenuButton.addEventListener('click', () => {
        if (mobileMenu.classList.contains('opacity-0')) {
            mobileMenu.classList.remove('opacity-0', 'invisible', '-translate-y-full');
            mobileMenu.classList.add('opacity-100', 'visible', 'translate-y-0');
            mobileMenuButton.innerHTML = '<i class="fa fa-times text-xl"></i>';
        } else {
            mobileMenu.classList.add('opacity-0', 'invisible', '-translate-y-full');
            mobileMenu.classList.remove('opacity-100', 'visible', 'translate-y-0');
            mobileMenuButton.innerHTML = '<i class="fa fa-bars text-xl"></i>';
        }
    });

    mobileMenuClose.addEventListener('click', () => {
        mobileMenu.classList.add('opacity-0', 'invisible', '-translate-y-full');
        mobileMenu.classList.remove('opacity-100', 'visible', 'translate-y-0');
        mobileMenuButton.innerHTML = '<i class="fa fa-bars text-xl"></i>';
    });

    // 导航栏滚动效果
    const header = document.querySelector('header');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            header.classList.add('py-2');
            header.classList.remove('py-3');
        } else {
            header.classList.add('py-3');
            header.classList.remove('py-2');
        }
    });
</script>
{% endblock end_script %}